Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@che-ins-ui/theme
Advanced tools
Readme
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· ThemeProvider ΠΎΡ "react-jss"
Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠ΅ΠΌΡ Π² ΠΏΡΠΎΠ²Π°ΠΉΠ΄Π΅Ρ Π²ΠΈΠ΄Π°
const theme = {
components: {
[INPUT_COMPONENT_NAMESPACE]: {
// component theme
},
[BUTTON_COMPONENT_NAMESPACE]: {
// component theme
},
},
};
ΠΠ½ΡΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ΄ΠΎΠ² ΡΡΠΈΠ»Π΅ΠΉ (Π΄Π°Π»Π΅Π΅ - appearance) Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ.
const theme = {
components: {
[INPUT_COMPONENT_NAMESPACE]: {
// base - ΡΡΠΈΠ»ΠΈ Π½Π° Π²ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ°
base: {
[INPUT_COMPONENTS_NAMES.wrapper]: {
fontSize: "12px",
// Π²ΠΎ Π²ΡΠ΅Ρ
Π°ΠΏΠΏΠΈΡΠ°Π½ΡΠ°Ρ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ²
[theme.breakpoints.up("md")]: {
fontSize: "14px",
},
},
},
big: {
[INPUT_COMPONENTS_NAMES.wrapper]: {
padding: "20px",
[theme.breakpoints.up("md")]: {
fontSize: "25px",
},
}
},
red: {
[INPUT_COMPONENTS_NAMES.wrapper]: {
background: 'red'
}
[INPUT_COMPONENTS_NAMES.input]: {
color: "red",
}
},
// ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠ³ΠΎ Π°ΠΏΠΏΠΈΡΠ°Π½ΡΠ° ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΈΠ½ΠΏΡΡΠ° ΠΏΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°ΠΌ
appearanceName: {
[INPUT_COMPONENTS_NAMES.wrapper]: {
'&[data-focused="true"]': {
alignItems: "center",
},
'&[data-hasvalue="true"]': {
alignItems: "center",
},
},
[INPUT_COMPONENTS_NAMES.input]: {
padding: "12px",
'&[data-focused="true"]': {
padding: "12px",
},
'&[data-hasvalue="true"]': {
padding: "12px",
},
"&:not(:focus)::placeholder": {
opacity: 1,
},
},
},
},
},
};
ΠΠ°ΠΆΠ΄ΡΠΉ Π°ΠΏΠΏΠΈΡΠ°Π½Ρ ΡΡΠΎΠΈΡ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ. ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°:
ΠΠ±ΡΡΠ½ΡΠΉ ΠΈΠ½ΠΏΡΡ (ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΠΈΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ base):
<Input value={value} onChange={onChange} />
Big ΠΈΠ½ΠΏΡΡ (ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΠΈΠ»ΠΈ base + big):
<Input value={value} onChange={onChange} appearance="big" />
Red ΠΈΠ½ΠΏΡΡ (ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΠΈΠ»ΠΈ base + red):
<Input value={value} onChange={onChange} appearance="red" />
Big Red ΠΈΠ½ΠΏΡΡ (ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΠΈΠ»ΠΈ base + big + red):
<Input
value={value}
onChange={onChange}
baseAppearance="big"
appearance="red"
/>
ΠΠ°ΠΊ ΠΈ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ css, ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΎΡΠ΄Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌ Π² css Π½ΠΈΠΆΠ΅, Π° Π½Π΅ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ². ΠΠΎ ΡΡΠΎΠΌΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π° base / appearance Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ. ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ, ΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ½ΡΡΡ baseAppearance Π² ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ Π²ΡΡΠ΅ ΡΠ΅ΠΌ appearance, ΠΏΡΠΎΠ²Π΅ΡΠΈΠ² Π½ΠΈΠ³Π΄Π΅ Π»ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ baseAppearance + appearance Π² ΡΡΠΎΠΌ ΡΠΈΠΏΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΠ΅ΠΉΡ ΠΎΡΠ΅Π½Ρ ΡΠ΅Π΄ΠΊΠΈΠΉ.
Π’Π°ΠΊ ΠΆΠ΅ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π΅ΡΡΡ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Π½Π° data-
. ΠΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈ ΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠ°Ρ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°.
ΠΠΎ ΠΈΡΠΎΠ³Ρ ΡΠ΅ΠΌΠ° Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ 4 ΠΊΠ»Π°ΡΡΠ°, ΡΡΠΎ ΡΠΎΠ·Π½Π°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎ Π±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΈΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π°. ΠΠ»Π°ΡΡΡ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡΡΡ ΠΏΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ:
classNamePrefix - ΡΠ°ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
blockName - ΠΎΠΏΠΈΡΠ°Π½Ρ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ°Ρ
Ρ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΠ°ΠΌΠΈ Π²ΠΈΠ΄Π° INPUT_COMPONENTS_NAMES.wrapper
. ΠΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ΅ΠΌΠ΅ Π΄Π΅Π»Π°Π΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½ΡΡΠ°Π½Ρ.
appearance - ΡΠΎ ΡΡΠΎ ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΌ ΠΊΠ°ΠΊ appearance / baseAppearance
{classNamePrefix}-{blockName}
{classNamePrefix}-{blockName}-base
{classNamePrefix}-{blockName}-{baseAppearance}
{classNamePrefix}-{blockName}-{appearance}
ΠΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΡΠ΅Π³ΠΎ Π»ΠΈΠ±ΠΎ ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡ Ρ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ ΠΊΠ»Π°ΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈΠ· Π·Π° Π½Π΅Π½Π°Π΄ΠΎΠ±Π½ΠΎΡΡΠΈ.
FAQs
<>
The npm package @che-ins-ui/theme receives a total of 148 weekly downloads. As such, @che-ins-ui/theme popularity was classified as not popular.
We found that @che-ins-ui/theme demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.